<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="出行人管理" navbarType='3' ></wlk-navbar>
        <view class="pd30">
            <block v-if="loadStatus=='nomore' && list.length==0">
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.search"
                            text="没有搜索结果"
                    >
                    </u-empty>
                </view>
            </block>
            <block v-else>
                <view class="item bgw pd30 shadow br08 wlkflex justify-between mb20"  v-for="(item, index) in list" :key="index">
                    <view class="passenger-icon" v-if="type=='chose'" @click="checkboxChange(item)">
                        <view class="icon-wrap wlkflex justify-center" :style="{backgroundColor: passengers.indexOf(item)===-1?'#FFFFFF':themeColor,borderColor:passengers.indexOf(item)===-1?'#c8c9cc':themeColor}">
                            <u-icon name="checkbox-mark" size="12" color="#FFFFFF" v-if="passengers.indexOf(item)!==-1"></u-icon>
                        </view>
                    </view>
                    <view class="item-info">
                      <view class="wlkflex">
                          <view class="bold realname">{{item.realname}}</view>
                         <!-- <view class="ml20">
                              <u-tag :text="item.gender=='0'?'女':'男'" plain size="mini" type="warning"></u-tag>
                          </view>-->
                      </view>
                      <view class="wlkflex info mt10">
                          <view class="title">
                              手机号
                          </view>
                          <view class="value">
                              {{item.mobile}}
                          </view>
                      </view>
                      <view class="wlkflex info mt10">
                          <view class="title">
                              {{idTypes[item.idtype]}}
                          </view>
                          <view class="value u-line-1">
                              {{item.idcard}}
                          </view>
                      </view>
                  </view>
                    <view @click="$Router.push('/pages/passenger/detail?id='+item.id)">
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </block>


        </view>

        <view class="wlk-fixed-btn wlkflex justify-around">
            <view style="width: 45%" v-if="type=='chose'">
                <u-button :customStyle="{
			        borderRadius:'8px',
			        margin:'0',
                }" size="large" @click="$Router.push('/pages/passenger/detail')" text="添加出行人"></u-button>
            </view>
            <view :style="'width: '+[type=='chose'?'45%':'92%']">
                <u-button
                    v-if="type=='chose'"
                    :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
                }" :color="themeColor" @click="backButtonClicked" :disabled="isButtonDisabled" size="large" :text="setBtnText"></u-button>
                <u-button
                    v-else
                    :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
                }" :color="themeColor" @click="$Router.push('/pages/passenger/detail')" size="large" text="添加出行人"></u-button>

            </view>

        </view>
    </view>
</template>

<script>
    var _self;
    import { mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['themeColor','uEmpty']),
            isButtonDisabled() {
                return this.passengers.length < this.total;
            },
            setBtnText(){
                return '确定('+this.passengers.length+'/'+this.total+')';
            },
        },
        data() {
            return {
                list:[],
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
                idTypes:['身份证','护照','台胞证','港澳通行证','港澳居民居住证','军官证','回乡证'],
                passengers:[],
                type:'',
                total:'',
                passenger_ids:'',
                btnText:''
            };
        },
        onLoad() {
            _self = this;
            this.type = this.$Route.query.type??'';
            this.total = this.$Route.query.total??'';
            this.passenger_ids = this.$Route.query.passenger_ids??'';

        },
        onShow() {
            this.list = [];
            this.passengers = [];
            this.loadStatus = 'loading';
            this.page = 1;
            this.getData();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
        methods: {
            async getData() {
                const res = await uni.$u.http.post("passenger/getList", {
                    page: this.page,
                });
                if (res && res.data && res.data.rows) {
                    //判断是否默认选中
                    if(this.type=='chose' && !uni.$u.test.isEmpty(this.passenger_ids)){
                        const passengerArr = this.passenger_ids.split(',');
                        res.data.rows.forEach(function (v,k) {
                            if(passengerArr.includes(v.id.toString())){
                                _self.passengers.push(v);
                            }
                        })
                    }
                    this.list = this.list.concat(res.data.rows);
                }
                this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
            },
            checkboxChange(n) {

                    var index = this.passengers.indexOf(n);
                    if(index === -1){
                        if(this.passengers.length<this.total){
                            this.passengers.push(n);
                        }
                    }else{
                        this.passengers.splice(index,1);
                    }

            },

            backButtonClicked() {
                uni.navigateBack({
                    delta: 1, // 返回上一页
                    complete: () => {
                        uni.$emit('passengerBack', _self.passengers); // 通过事件广播传递参数确认订单页面
                    }
                });
            },
        },
    };
</script>

<style lang="scss">
    .item{
        .item-info{
            width: 80%;
            .realname{
                font-size: $font-lt;
            }
            .info{
                color: $uni-text-color-grey;
                font-size: $font-base;
                .value{
                    width: 55%;
                    margin-left: 30rpx;
                }
            }
        }
        .passenger-icon{
            .icon-wrap{
                width: 36rpx;
                height: 36rpx;
                border:1px solid #c8c9cc;
                border-radius: 3px;
                transition-duration: 0.2s;
            }
        }
    }
    .load-more{
        margin-bottom: 100rpx;
    }
</style>
